<template>
  <mt-navbar title="我要投诉"> </mt-navbar>
  <view class="safety-150">
    <view class="forms">
      <uv-form ref="formRef" label-position="top" label-width="auto" :border-bottom="false" :model="modelForm" :rules="rules">
        <view class="h-16rpx"></view>
        <uv-form-item label="投诉原因：" prop="complaintContent" required>
          <view class="w-full pt-20rpx">
            <uv-textarea
              v-model="modelForm.complaintContent"
              maxlength="500"
              :height="180"
              placeholder="请输入投诉原因"
              border="none"
              @blur="handlePosition(200)"
            ></uv-textarea>
          </view>
        </uv-form-item>
        <view class="h-16rpx"></view>
        <uv-form-item label="上传证据：" prop="complaintEvidenceUrls" required>
          <view class="w-full">
            <mt-upload-file ref="uploadRef" v-model="modelForm.complaintEvidenceUrls" oss-path="clue"></mt-upload-file>
          </view>
        </uv-form-item>
      </uv-form>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button type="info" class="w-210rpx" :shake="false" @click="back">取消</mt-button>
      <mt-button class="w-450rpx" @click="handleSubmit">确定</mt-button>
    </view>
  </view>
</template>

<script setup>
import { cluecomplaint } from '@/subClue/api/index';

const formRef = ref();
const modelForm = ref({
  clueId: '',
  complaintContent: '',
  complaintEvidenceUrls: []
});
const rules = {
  complaintContent: {
    type: 'string',
    required: true,
    message: '请输入投诉原因',
    trigger: ['blur']
  },
  complaintEvidenceUrls: {
    type: 'array',
    required: true,
    message: '请上传证据',
    trigger: ['change']
  }
};

const uploadRef = ref();
function handlePosition(timer = 0) {
  setTimeout(() => {
    uploadRef.value.changePosition();
  }, timer);
}

function handleSubmit() {
  formRef.value
    .validate()
    .then(() => {
      cluecomplaint(modelForm.value).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功',
          duration: 1000
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      });
    })
    .catch((err) => {
      handlePosition();
    });
}

function back() {
  uni.navigateBack();
}

onLoad((options) => {
  modelForm.value.clueId = options.id;
});
</script>

<style lang="scss" scoped>
.forms {
  :deep(.uv-textarea) {
    background: #f7f7f7 !important;
  }
  :deep(.uv-form) {
    .uv-form-item {
      font-size: 28rpx;
      background-color: #ffffff;
      .uv-form-item__body {
        padding: 30rpx 32rpx;
      }
      .uv-form-item__body__left__content__label {
        font-size: 28rpx;
        color: #727687;
        padding-left: 8rpx;
      }
    }
  }
}
</style>
